<template>
	<view class="project" @touchstart="touchStart" @touchend="touchEnd">
		<view class="project-header">
			<view class="project-header_name">
				<text class="icon icon-lunchuan"></text>
				<text class="project-header_text" style="color: dodgerblue"
					@click="$goPage(userType == 1? '/staff/bench/detail':'/client/repair/detail',{project: project, tab: userType == 1?3:2})" :selectable="true">{{menu.ProjectName}}</text>
			</view>
			<template v-for="(item,index) in menu.MenuList">
				<block v-if="index == menu.MenuList.length -1">
					<text class="project-header_item current" style="color: black" :selectable="true">{{item.IndexNo}} {{item.ItemName}}</text>
				</block>
				<block v-else>
					<view class="project-header_item">
						<text class="catalogue" :selectable="true" @click="$goPage(userType == 1?'/staff/bench/detail':'/client/repair/detail',{project: project, iid: item.Iid, tab: userType == 1?3:2})">
							<text class="icon icon-mulu u-m-r-10" style="color: #fff;font-size: 28rpx"></text>
						  <text class="u-m-r-10" v-if="item.IndexNo">{{ item.IndexNo }}.</text>
							{{ item.ItemName }}
						</text>
						<text class="check-detail"
							@click="$goPage('/repair/project',{project:project,iid:item.Iid})">{{$t('project.detail')}}<u-icon name="arrow-right"></u-icon></text>
					</view>
				</block>
			</template>
		</view>
		<view class="project-items" v-if="iid > 0">
			<view class="project-item u-flex">
				<view class="project-item_label u-flex-1">{{$t('project.unit')}}：<text
						class="project-item_value">{{info.Unit}}</text></view>
				<view class="project-item_label u-flex-1">{{$t('project.price')}}：<text v-if="prcPermission == 1 "
						class="project-item_value">{{info.PriceText}}</text>
						<text v-else class="project-item_value">0</text></view>
			</view>
			<view class="project-item u-flex">
				<view class="project-item_label u-flex-1">{{$t('project.quantity')}}：<text
						class="project-item_value">{{info.QtyText}}</text></view>
				<view class="project-item_label u-flex-1">{{$t('project.amount')}}：<text v-if="prcPermission == 1 "
						class="project-item_price">{{info.AmountText}}</text><text v-else class="project-item_value">0</text></view>
			</view>
			<view class="project-item u-flex">
				<view class="project-item_label u-flex-1">{{$t('project.progress_status')}}：<text
						class="project-item_value">{{$t('project.progress_stat.'+info.ProcessStat)}}</text></view>
			</view>
			<view class="project-item u-flex">
				<view class="project-item_label u-flex-1">{{$t('project.add_sub_type')}}：<text
						class="project-item_value">{{$t('project.add_sub_pro.'+info.ChangeType)}}</text></view>
			</view>
			<view class="project-item u-flex">
				<view class="project-item_label u-flex-1">{{$t('project.remark')}}：<text
						class="project-item_value">{{info.Rmk}}</text></view>
			</view>
			<view class="project-item u-flex u-row-center">
				<view class="project-footer" v-if="info.IsConfirm == 0 || info.IsConfirm == 3 || info.IsConfirm == 4 || info.IsConfirm == 7 ||info.IsConfirm == 8 ||(apyAccPermission==1&&(info.IsConfirm == 1||info.IsConfirm == 5))" >
					<u-button  type="primary" size="mini" plain class="margin-right" @click="goEditLock(1)">
						<u-icon name="edit-pen" color="#2979ff" size="28"></u-icon>
					</u-button>
					<u-button type="success" size="mini" plain class="margin-right" @click="goEditLock(2)">
						<u-icon name="plus" color="#6BD295" size="28"></u-icon>
					</u-button>
					<u-button type="error" size="mini" plain @click="godeleteshow">
						<u-icon name="trash" color="#F97B7D" size="28"></u-icon>
					</u-button>
				</view>
			</view>
		</view>
		<view class="project-main" style="position:relative">
			<view class="project-tabs">
				<u-subsection :list="list" :current="current" active-color="#0089FF" inactive-color="#FFFFFF"
					mode="subsection" height="70" @change="tabChange"></u-subsection>
			</view>
			<view class="project-tab" style="margin-top:70px !important" v-if="current == 1" >
				<!-- <view style="position: absolute;top: 340rpx;left:50%;transform: translateX(-50%)" v-if="JSON.parse(JSON.stringify(topics)).length == 0">{{ empty_text }}</view> -->
			
					<view class="article-item" v-for="(item, index) in topics" :key="index" @click="goDetail(item.Tid)">
					<view class="article-header u-flex">
						<view class="article-header_avatar" @click.stop="$goPage('/user')">
							<u-image v-if="item.AddAccAvatar" width="85rpx" height="85rpx" border-radius="85rpx"
								:src="item.AddAccAvatar"></u-image>
							<u-image v-else width="85rpx" height="85rpx" border-radius="85rpx"
								src="/static/images/avatar.jpg"></u-image>
						</view>
						<view class="article-header_name u-flex-1">
							<view class="article-header_name--text">{{ item.AddAccName }}</view>
							<view class="article-header_time">
								{{ item.AddTimeText }}
							</view>
						</view>
					</view>
					<rich-text class="article-content" :nodes="item.Content"></rich-text>
					<view class="article-video" v-if="item.VodSrc != ''" @click.stop="actVideoPlay(index)">
						<image class="article-video_img" mode="aspectFit" :src="item.VodImg"></image>
						<view class="article-video_play" v-if="!isPlay">
							<image class="article-video_play--icon" src="/static/images/home/play.png"
								mode="scaleToFill" />
						</view>
						<video :id="'video'+index" class="article-video_item" :src="item.VodSrc" :autoplay="autoplay"
							@fullscreenchange="fullscreenchange" v-show="isPlay" />
					</view>
					<view class="article-images" v-else>
						<template v-for="(img, index) in item.ImgPackJson">
							<images-item :item="img" :index="index" :imgjson="item.ImgPackJson"></images-item>
						</template>
					</view>
				</view>
			</view>
			<view class="project-tab"  style="margin-top:70px !important"  v-else="current == 0" >
				<!-- <view style="position: absolute;top: 340rpx;left:50%;transform: translateX(-50%)">{{ empty_text }}</view> -->
					<view class="flow">
						<template v-for="(item,index1) in logs">
							<view class="flow-item u-flex-1 ">
								<text class="flow-item_circle"></text>
								<view class="u-flex flow-item_header">
									<view class="u-flex-1">
										{{item.AddAccName}}
									</view>
									<text class="flow-item_time">
										{{item.AddTimeText}}
									</text>
								</view>
								<template v-for="(updates,index) in item.UpdateList">
									<view class="u-flex">{{updates}}</view>
								</template>
								<template v-for="(content,index) in item.Contents">
									<view class="u-flex">
										{{content.Name}}: {{content.NewValue}}
										<text style="color:gray;text-decoration: line-through;"
											v-if="content.OldValue != ''">&nbsp;&nbsp;({{content.OldValue}})</text>
									</view>
								</template>
								<text v-show="item.Stat > 0">({{item.StatAccName}} {{item.StatText}}
									{{item.StatTime}})</text>
								<text class="u-flex"
									v-show="item.StatRmk != ''">{{$t('project.reject_remark') }}：{{item.StatRmk}}</text>
							</view>
						</template>
					</view>
					<u-loadmore  :status="loadStatus" :icon-type="iconType" :load-text="loadText" margin-bottom="45"
						margin-top="45" color="#C1C0C0" />
			</view>
			<view class="fixed-publish" @click="$goPage('/repair/publish', {project: project,iid:iid,type:2}, true)">
				<u-image width="84rpx" height="84rpx" src="/static/images/issue.png" mode=""></u-image>
			</view>
		</view>
		<!-- 下拉选择器 -->
		<u-popup v-model="isCheckPopup" mode="center" border-radius="20">
			<view class="check-box">
				<view class="check-title">选择通知客户</view>
				<scroll-view scroll-y="true" style="height: 500rpx;">
					<u-radio-group @change="radioChange">
						<view class="check-item u-flex u-border-bottom" v-for="(item, index) in clientList"
							:key="index">
							<view class="check-item_txt u-flex-1">{{item.nickname}}</view>
							<u-radio :name="item.user" v-model="item.user"></u-radio>
						</view>
					</u-radio-group>
				</scroll-view>
				<view class="confrim-btn">
					<u-button style="margin-top: 8rpx;" type="primary" @click="nextFunc">通知客户</u-button>
					<u-button style="margin-top: 12rpx;" @click="actDelete">不通知</u-button>
				</view>
			</view>
		</u-popup>
		<u-modal v-model="deleteShow" :show-cancel-button="true" :show-title="false" :cancelText="$t('project.btn_cancel')"
			:confirmText="$t('project.btn_confirm')" :content="$t('project.del_project')" @confirm="deleteConfirm"></u-modal>
		<!-- 消息提示 -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import store from '@/store/index.js';
	import imagesItem from '@/components/images-item/index.vue';
	import pageMixin from '@/utils/pageMixin';
	export default {
		mixins: [pageMixin],
		data() {
			return {
				userType: 2,
				project: 0,
				iid: 0,
				topics: [],
				topicIdx: 1,
				menu: {
					MenuList: [],
				},
				logIdx: 1,
				logs: [],
				list: [{
						name: this.$t('project.log')
					},
					{
						name: this.$t('project.follow')
					},
				],
				current: 0,
				projectInfo: {},
				info: {},
				isPlay: false,
				autoplay: false,
				videoContext: null,
				title: '',
				type: 'images',
				deleteShow: false,
				prcPermission: 1,
				clientUid: 0,
				clientList: [],
				clientValue: '请选择客户',
				isCheckPopup: false,
				empty_text: this.$t('project.is_loading'),
				apyAccPermission:0,
				isTriggered: false,
				title: this.$t('project.detail'),
				loadStatus: 'loading',
				loadText: {
					loadmore: this.$t('home.pull_up'),
					loading: this.$t('home.loading'),
					nomore: this.$t('home.note_no_more'),
				},
			}
		},
		onLoad(option) {
			this.userType = store.state.userType || 2
			console.log(option)
			this.title = option.title || this.$t('project.detail')
			uni.setNavigationBarTitle({
				title: this.title
			});
			this.project = option.project || 0;
			this.iid = option.iid || 0;
			this.getPermissionPrice();
			this.getLogList();
		},
		onShow() {
			this.getProjectInfo(this.project);
			this.getInfo(this.project, this.iid);
			this.getMenu(this.project, this.iid);
			this.getProjectClient();
			this.getPermissionPriceAcc();
			this.loadStatus = 'loading';
		},
		onPullDownRefresh(){
			switch(this.current){
				case 0:
				this.logIdx = 1
				this.getLogList();
				break;
				case 1:
				this.topicIdx = 1
				this.getTopicList();
				break;
			}
		},
		onReachBottom(){
			switch(this.current){
				case 0:
				this.getLogList();
				break;
				case 1:
				this.getTopicList();
				break;
			}
		},
		components: {
			imagesItem
		},
		computed: {
			i18n() {
				return this.$t('project')
			}
		},
		methods: {
			touchStart(e) {
				console.log("触摸开始")
				this.touchStartX = e.touches[0].clientX;
				this.touchStartY = e.touches[0].clientY;
			},
			touchEnd(e) {
				console.log("触摸结束")
				let deltaX = e.changedTouches[0].clientX - this.touchStartX;
				let deltaY = e.changedTouches[0].clientY - this.touchStartY;
				if (Math.abs(deltaX) > 50 && Math.abs(deltaX) > Math.abs(deltaY)) {
					if (deltaX >= 0) {
						console.log("左滑")
						this.goBack()
					} else {
						console.log("右滑")
					}
				} else if(Math.abs(deltaY) > 50&& Math.abs(deltaX) < Math.abs(deltaY)) {
					if (deltaY < 0) {
						console.log("上滑")
					} else {
						console.log("下滑")
					}
				} else {
					console.log("可能是误触！")
				}
			},
			godeleteshow() {
				this.$http.post('/mgr/biz/project/item/query/lock', {
					iid: this.iid,
					pid: this.project,
				}).then(res => {
					if (res.lock == 0) {
						this.deleteShow = true
					} else {
						uni.showToast({
							title: '此修理项正在被编辑中，请稍后编辑！',
							icon: 'none',
							duration: 2000
						});
						return
					}
				})
			},
			//项目出价人权限
			getPermissionBidPriceAcc() {
				this.$http.get('/client/biz/project/item/permission/BidPriceAcc', {
					project: this.project
				}).then(res => {
					this.apyAccPermission = res;
				});
			},
			//出价权限
			getPermissionPriceAcc() {
				this.$http.get('/client/biz/project/item/permission/PriceAcc', {
					// project: this.project
				}).then(res => {
					// this.apyPermission = res;
					this.apyAccPermission = res;
				});
			},
			//价格可见权限
			getPermissionPrice() {
				this.$http.get('/client/biz/project/item/permission/price', {
					project: this.project
				}).then(res => {
					this.prcPermission = res;
				});
			},
			goEditLock(tid) {
				this.$http.post('/mgr/biz/project/item/query/lock', {
					iid: this.iid,
					pid: this.project,
					stat: 1,
				}).then(res => {
					if (res.lock == 0) {
						if (tid == 1) {
							this.$goPage('/repair/edit', {
								title: this.$t('project.btn_edit'),
								project: this.project,
								iid: this.iid
							}, true)
						} else {
							this.$goPage('/repair/edit', {
								title: this.$t('project.btn_add'),
								project: this.project,
								iid: this.iid
							}, true)
						}
					} else {
						uni.showToast({
							title: '此修理项正在被编辑中，请稍后编辑！',
							icon: 'none',
							duration: 2000
						});
						return
					}
				})
			},
			tabChange(index) {
				this.empty_text = this.$t('project.is_loading')
				this.current = index;
				switch (index) {
					case 0:
					this.logs = []
				  	this.logIdx = 1
					this.getLogList();
					break;
					case 1:
					this.topics = []
					this.topicIdx = 1
					this.getTopicList();
					break;
				}
			},
			goBack() {
				this.$u.route({
					type: 'back',
					delta: 1
				})
			},
			getProjectInfo(project) {
				if (project > 0) {
					this.$http.get('/mgr/biz/project/info', {pid: project}).then(res => {
						this.projectInfo = res;
					})
				}
			},
			getInfo(project, iid) {
				if (project > 0 || iid > 0) {
					this.$http.get('/client/biz/project/item/info', {
						'project': project,
						'iid': iid
					}).then(res => {
						this.info = res
					})
				}
			},
			getMenu(project, iid) {
				if (project > 0 || iid > 0) {
					this.$http.get('/client/biz/project/item/menu', {
						'project': project,
						'iid': iid
					}).then(res => {
						this.menu = res
					})
				}
			},
			getTopicList() {
				this.$http.get('/bbs/topic/pager/data', {
					type: 2,
					idx: this.topicIdx,
					size: 25,
					pid: this.project,
					iid: this.iid,
				}).then(res => {
					if(this.topicIdx == 1) {
						this.topics = res
					}else {
						this.topics = [...this.topics,...res]
					}
					if(this.topics.length === this.topicIdx * 25) {
						//如果数据还没有拉完,继续加1
						this.topicIdx++
						this.loadStatus ='loading' 
					}else{
						this.loadStatus ='nomore' 
					}
					if(this.topics.length == 0) {
						this.empty_text =  this.$t('mine.bbs_empty')
					}
				})
			},

			getLogList() {
				//console.log('Jin')
				this.$http.get('/mgr/biz/project/item/log/pager/data/Iid', {
					project: this.project,
					iid: this.iid,
					idx: this.logIdx,
					size: 25,
				}).then(res => {
	        if(this.logs.length == 0 && res == null) {
	        	this.empty_text = this.$t('home.bbs_empty')
	        }else{
	           this.empty_text = ''
	        }
					if (res) {
						console.log(res)
						var UpdateList = [];
						for (var item of res) {
							if (item.StatText == '待确认') {
								item.StatText = this.$t('project.no_confirmed')
							}
							if (item.StatText == '已确认') {
								item.StatText = this.$t('project.confirmed')
							}
							if (item.StatText == '驳回') {
								item.StatText = this.$t('project.reject')
							}
							if (item.UpdateList) {
								item.UpdateList.forEach(item1 => {
									item1 = item1.replace("编辑索引", this.$t('project.prject_code'));
									item1 = item1.replace("编辑工程内容", this.$t('project.edit_project_content'));
									item1 = item1.replace('编辑单位', this.$t('project.edit_unit'));
									item1 = item1.replace('编辑数量', this.$t('project.edit_number'));
									item1 = item1.replace('编辑备注', this.$t('project.edit_remark'));
									item1 = item1.replace('编辑单价', this.$t('project.edit_unit_price'));
									item1 = item1.replace('新增工程内容', this.$t('project.add_project_content'));
									item1 = item1.replace('新增', this.$t('project.btn_add'));
									item1 = item1.replace('撤回删除工程内容', this.$t('project.recall_del_project_content'));	
									item1 = item1.replace('删除工程内容', this.$t('project.del_project_content'));
									item1 = item1.replace('撤回删除', this.$t('project.recall_del'));
									item1 = item1.replace('删除', this.$t('project.btn_del'));
									item1 = item1.replace('覆盖性导入', this.$t('project.overwrite'));
									item1 = item1.replace('选择性导入', this.$t('project.Batch_Import'));
									item1 = item1.replace('导入行数', this.$t('project.Rows_Imported'));
									item1 = item1.replace('总金额', this.$t('project.total_amount'));
									UpdateList.push(item1)
								})
								item.UpdateList = UpdateList;
								UpdateList = []
							}

							if (item.Contents) {
								for (let i = 0; i < item.Contents.length; i++) {
									if (item.Contents[i].Column == 'ProcessStat') {
										item.Contents[i].Name = this.$t('project.project_stat_name');
										// console.log(this.$t('project.project_stat_name'))
										item.Contents[i].OldValue = this.$t('project.progress_stat['+item.Contents[i].OldText + ']');
										item.Contents[i].NewValue = this.$t('project.progress_stat['+item.Contents[i].NewText + ']');
									} else if (item.Contents[i].Column == 'ItemType') {
										item.Contents[i].Name = this.$t('project.project_item_type_name');
										if(item.Contents[i].OldValue == undefined){
											item.Contents[i].OldValue  = ''
										}else{
											item.Contents[i].OldValue = this.$t('project.project_item_type['+item.Contents[i].OldText + ']');
										}
										item.Contents[i].NewValue = this.$t('project.project_item_type['+item.Contents[i].NewText + ']');
									} else if (item.Contents[i].Column == 'PayType') {
										item.Contents[i].Name = this.$t('project.project_pay_type_name');		
										if(item.Contents[i].OldValue == undefined){
											item.Contents[i].OldValue  = ''
										}else{
											item.Contents[i].OldValue = this.$t('project.project_pay_type['+item.Contents[i].OldText + ']');
										}
										item.Contents[i].NewValue = this.$t('project.project_pay_type['+item.Contents[i].NewText + ']');
									} else if (item.Contents[i].Column == 'ChangeType') {
										item.Contents[i].Name = this.$t('project.project_change_type_name');
										item.Contents[i].OldValue = this.$t('project.add_sub_pro['+item.Contents[i].OldText + ']');
										item.Contents[i].NewValue = this.$t('project.add_sub_pro['+item.Contents[i].NewText + ']');
									}
								}
							}
						}
						if(this.logIdx == 1 ){
							this.logs = res
						}else{
							this.logs = [...this.logs, ...res]
						}					
						// this.logs = [...this.logs, ...res]
						// console.log(this.logs)
						
					}
				    if(this.logs.length === this.topicIdx * 25) {
						//如果数据还没有拉完,继续加1
							this.logIdx++
							this.loadStatus ='loading' 
					}else{
						this.loadStatus ='nomore'
					}
					
				})
			},
			goDetail(tid) {
				if (this.isDetail) return;
				this.$goPage('/article/detail', {
					tid: tid
				})
			},

			getProjectClient() {
				this.$http.get('/client/biz/person/list', {
					project: this.project,
					user_type: 2,
					is_message: 1
				}).then(res => {
					this.clientList = res;
				});
			},
			actVideoPlay(index) {
				this.videoContext = uni.createVideoContext('video' + index, this);
				this.isPlay = true;
				this.videoContext.requestFullScreen({
					direction: '0'
				});
				this.autoplay = true;
			},
			fullscreenchange(e) {
				if (!e.detail.fullScreen) {
					this.isPlay = false;
				}
			},
			deleteConfirm() {
				if (this.userType == 1 && this.projectInfo.SelfIsBidPriceAcc == 1) {
					this.isCheckPopup = true;
					return;
				}
				this.actDelete();
			},
			radioChange(e) {
				this.clientUid = e;
			},
			nextFunc() {
				let that = this;
				let clientUid = that.clientUid || 0;
				if (clientUid == 0 && that.userType == 1) {
					uni.showToast({
						title: '请选择通知客户',
						icon: 'none',
						duration: 2000
					});
					return
				}

				that.actDelete();
			},
			actDelete() {
				let that = this;
				this.isCheckPopup = false;
				this.deleteShow = false;
				this.$http.post('/client/biz/project/item/delete', {
					iid: this.iid,
					pid: this.project,
					clientUid: this.clientUid
				}).then(res => {
					if (this.clientUid == 0) {
						this.title = this.$t('project.operation');
					} else if (this.userType == 2) {
						this.title = this.$t('project.operation') + '\r\n' + this.$t('project.WaitingConfirmation');
					} else {
						this.title = this.$t('project.operation') + '\r\n' + this.$t('project.WaitingCustomerConfirmation');
					}
					this.$refs.uToast.show({
						title: this.title,
						icon: false,
					});
					setTimeout(function () {
						// that.$u.route({
						// 	url: '/pages/staff/bench/detail/index?project='+that.info.Project+'&item='+that.info.Iid+'&tab=3',
						// });
						that.$u.route({
						  type: 'back',
						  delta: 0,
						});
					}, 1000);
				});
			},
			copy(value) {
				console.log(" 复制拉")
				let that = this;
				value = value.replace(/<\/?[^>]*>/g, ''); //去除HTML Tag
				value = value.replace(/[|]*\n/, ''); //去除行尾空格
				value = value.replace(/&nbsp;/g, ''); //去掉npsp
				uni.showModal({
					content: value,
					showCancel: true,
					cancelText: that.$t('project.copy'),
					confirmText: that.$t('project.btn_cancel'),
					success: (res) => {
						if (!res.confirm) {
							uni.setClipboardData({
								data: value,
								success: () => {
									uni.showToast({
										title: that.$t('project.copy_success')
									})
								}
							})
						}else {
			
						}
					}
				})
			},
			refreshList() {
				if(!this.isTriggered){
					this.isTriggered = true
				  setTimeout(()=>{
					this.isTriggered=false
				  },1500)
				}
				if(this.current == 0) {
					this.logs = []
					this.logIdx = 1
					this.getLogList();
				}else{
					this.topics = []
					this.topicIdx = 1
					this.getTopicList()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.project {
		padding-bottom: 20rpx;
		// overflow: auto;
		// box-sizing:border-box;
		min-height:100vh;
		&-header {
			padding: 30rpx 30rpx 20rpx;
			font-size: 28rpx;
			color: #555555;
			background-color: #FFFFFF;
			border-bottom: 1rpx solid #E5E5E5;

			&_name {
				margin-bottom: 16rpx;
				font-size: 31rpx;
				color: #131313;
			}

			&_item {
				display: flex;
				justify-content: space-between;
				margin-bottom: 24rpx;
				align-items: center;
				.catalogue {
					border-radius: 30rpx;
					background-color: #0089FF;
					color: #fff;
					padding: 8rpx 24rpx;
					font-size: 26rpx;
				}
				.check-detail {
					color: #0089FF;
					margin-right: 10rpx;
					margin-left: 20rpx;
					white-space: nowrap;
				}
			}

			&_item.current {
				display: inline-block;
				padding: 0 18rpx;
				color: #0089FF;
				line-height: 1.6;
				background: #E9F4FE;
				border-radius: 4rpx;
			}

			.icon {
				color: #0089FF;
				margin: 0 6rpx;
			}

		}

		&-items {
			padding: 30rpx 30rpx 1rpx;
			font-size: 28rpx;
			background-color: #FFFFFF;

			.project-item {
				margin-bottom: 30rpx;

				&_label {
					color: #666666;
				}

				&_price {
					color: #D20B0B;
				}

				&_value {
					white-space: normal;
					word-break: break-all;
				}
			}
		}

		&-main {
			margin-top: 20rpx;
			padding: 10rpx 30rpx;
			background-color: #FFFFFF;

			.project-tabs {
				width: 400rpx;
				padding: 0 0 30rpx;
				margin: 0 auto;
				// position: absolute;
				// top:30rpx;
				// left:50%;
				// transform:translateX(-50%)
			}
			.project-tab {
				margin-top: 80rpx;
				// height: 90vh;
			}
			.article-item {
				margin-bottom: 30rpx;
				border-bottom: 1rpx solid #E5E5E5;

				.article-header {
					height: 85rpx;
					margin-bottom: 24rpx;
				}

				.article-header_avatar {
					margin-right: 26rpx;
				}

				.article-header_name--text {
					font-size: 30rpx;
					color: #494949;
					font-weight: bold;
				}

				.article-content {
					font-size: 30rpx;
					margin-bottom: 24rpx;
					white-space: normal;
					word-break: break-all;
				}

				.article-video {
					position: relative;
					padding-bottom: 30rpx;

					&_item {
						position: relative;
						margin-left: -30rpx;
						width: 100vw;
						height: 100vh;
					}

					&_img {
						max-width: 690rpx;
						max-height: 300rpx;
						width: auto;
					}

					&_play {
						width: 62rpx;
						height: 62rpx;
						position: absolute;
						left: 50%;
						top: 50%;
						transform: translate(-50%, -50%);
						border-radius: 5px;
						background: #505050;

						&--icon {
							width: 100%;
							height: 100%;
						}
					}
				}

				.article-images {
					clear: both;
					overflow: hidden;
					padding-bottom: 10rpx;

					&_item {
						margin: 10rpx;
						float: left;
					}
				}
			}

			.article-item:last-child {
				margin-bottom: 0;
				border-bottom: none;
			}

			.flow {
				position: relative;
				margin: 30rpx 0;
				padding-left: 96rpx;

				&-item {
					position: relative;
					font-size: 28rpx;
					color: #131313;
					padding-bottom: 90rpx;
					line-height: 1.6;

					&_header {
						padding-bottom: 20rpx;
					}

					.flow-item_time {
						color: #666666;
					}

					&_circle {
						position: absolute;
						left: -66rpx;
						top: 6rpx;
						width: 1rpx;
						height: 100%;
						background-color: #E5E5E5;
					}

					&_circle::before {
						z-index: 2;
						content: '';
						position: absolute;
						left: -8rpx;
						top: 6rpx;
						width: 22rpx;
						height: 22rpx;
						border-radius: 22rpx;
						background-color: #E5E5E5;
					}

					&_circle::after {
						z-index: 1;
						content: '';
						position: absolute;
						left: -15rpx;
						top: 0;
						width: 30rpx;
						height: 30rpx;
						border-radius: 30rpx;
						border: 1rpx solid #E5E5E5;
						background-color: #FFFFFF;
					}

				}

				&-item:last-child {
					padding-bottom: 0;
				}
			}
		}

		&-footer {
			.u-btn {
				display: inline-block;
				margin-right: 20rpx;
			}
		}
	}
	.fixed-publish {
		z-index: 9999;
		position: fixed;
		right: 4rpx;
		bottom: 200rpx;
	}

	.margin-right {
		margin-right: 50rpx ;
	}



	.check-box {
		width: 600rpx;
		padding: 40rpx;
	}

	.check-title {
		font-size: 32rpx;
		margin-bottom: 20rpx;
	}

	.check-item {
		width: 100%;
		background-color: #fff;
		height: 106rpx;
		padding: 0 24rpx 0 18rpx;
	}
</style>
